<template>
    <view :class="footerRail ? 'footerRail' : ''"  class="nav-bar">
        <view class="nav-block" v-for="(item, index) in navList" :key="index" @click.stop="navTo(item, index)">
            <image class="nav-icon" v-if="index === activeIndex" :src="item.inSrc" />
            <image class="nav-icon" v-else :src="item.src" />
            <view :class="index === activeIndex ? 'inNav-style' : 'nav-style'">{{ item.title }}</view>
        </view>
    </view>
</template>

<script>
var app = getApp()
    export default {
        props: {
            activeIndex: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                footerRail: app.globalData.footerRail,
                navList: [
                    {
                        id: 1,
                        title: '项目',
                        src: '../static/navBar/project_navBar.png',
                        inSrc: '../static/navBar/inProject_navBar.png',
                        pagePath: '../project/project'
                    },
                    {
                        id: 2,
                        title: '企业',
                        src: '../static/navBar/company_navBar.png',
                        inSrc: '../static/navBar/inCompany_navBar.png',
                        pagePath: '../company/company'
                    },
                    {
                        id: 3,
                        title: '对接',
                        src: '../static/navBar/message_navBar.png',
                        inSrc: '../static/navBar/inMessage_navBar.png',
                        pagePath: '../im/im'
                    },
                    {
                        id: 4,
                        title: '我的',
                        src: '../static/navBar/user_navBar.png',
                        inSrc: '../static/navBar/inUser_navBar.png',
                        pagePath: '../my/my'
                    }
                ]
            }
        },
        methods: {
            navTo(item, index) {
                if(index != this.activeIndex) {
                    uni.switchTab({
                        url: item.pagePath
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .footerRail {
        padding-bottom: 40rpx;
    }
    .nav-bar {
        width: 100%;
        height: 100rpx;
        background: white;
        position: fixed;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: space-around;
        bottom: 0;
        border-top: 2rpx solid #dfdfdf
    }
    .nav-block {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .nav-icon {
        width: 60rpx;
        height: 60rpx;
    }
    .inNav-style {
        color: #5162FD;
        font-size: 20rpx;
        text-align: center;
        line-height: 20rpx;
    }
    .nav-style {
        color: #494949;
        font-size: 20rpx;
        text-align: center;
        line-height: 20rpx;
    }
</style>
